<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="index.js" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="main">
      <!-- 导航栏 -->
      <div class="header clearfix">
        <ul class="leftfix">
          <li><a href="#" class="item">商店</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">Mac</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">IPad</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">IPone</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">Watch</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">AirPods</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">Watch</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">家居</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">娱乐</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">配件</a></li>
        </ul>
        <ul class="leftfix">
          <li><a href="#" class="item">技术支持</a></li>
        </ul>
        <ul class="leftfix">
            <li><img src="./images/search.png" alt=""></li>
        </ul>
      </div>
      <!-- 吸顶导航栏 -->
      <div class="nav">
        <div class="nav-main">
            <div class="peijian">配件</div>
        </div>
      </div>
      <!-- 图片区 -->
      <div class="image-container">
        <img id="image" src="./images/banner1.png" alt="" />
      </div>
      <!-- 配件搜索区 -->
      <div class="peijian-search">
        <div class="peijian-search-main">
            <h2>找到你想要的配件</h2>
            <div class="search bar3">
                <form>
                    <input type="text" placeholder="搜索配件">
                    <button type="submit"></button>
                </form>
            </div>
        </div>
        <!-- 选择区 -->
       
      </div>
      <!-- 类别浏览 -->
      <div class="select">
        <ul class="navr">
            <li class="selected">按产品浏览</li>
            <li>按类别浏览</li>
          </ul>
          <div class="content">
            <div class="list">
              <div class="image-container">
                <img src="./select/ipad.png" alt="" />
                <p class="caption">iPad</p>
              </div>
              <div class="image-container">
                <img src="./select/ipone.png" alt="" />
                <p class="caption">iPhone</p>
              </div>
              <div class="image-container">
                <img src="./select/mac.png" alt="" />
                <p class="caption">Mac</p>
              </div>
              <div class="image-container">
                <img src="./select/watch.png" alt="" />
                <p class="caption">Watch</p>
              </div>
            </div>
            <div class="list">
              <div class="image-container">
                  <img src="./select/新品.png" alt="" />
                  <p class="caption">新品</p>
                </div>
                <div class="image-container">
                  <img src="./select/保护壳.png" alt="" />
                  <p class="caption">保护壳</p>
                </div>
                <div class="image-container">
                  <img src="./select/充电器..png" alt="" />
                  <p class="caption">充电器</p>
                </div>
                <div class="image-container">
                  <img src="./select/充电装备.png" alt="" />
                  <p class="caption">充电装备</p>
                </div>
                <div class="image-container">
                  <img src="./select/耳机 (2).png" alt="" />
                  <p class="caption">耳机</p>
                </div>
            </div>
          </div>
      </div>
      <!-- 轮播图1 表带-->
      <div class="container">
        <h2>Apple Watch 表带</h2>
        <div class="main">
          <div class="arrow arrow-left">&lt;</div>
          <div class="arrow arrow-right">&gt;</div>
          <div class="watch-list">
          </div>
          <div class="dotnav">
            <ul></ul>
          </div>
        </div>
      </div>
      <!-- 轮播图2 手机-->
      <div class="container">
        <h2>iPhone精选配件</h2>
        <div class="main">
          <div class="arrow arrow-left">&lt;</div>
          <div class="arrow arrow-right">&gt;</div>
          <div class="watch-list"></div>
          <div class="dotnav">
            <ul></ul>
          </div>
        </div>
      </div>
      <!-- 轮播图3 耳机-->
      <div class="container">
        <h2>耳机精选配件</h2>
        <div class="main">
          <div class="arrow arrow-left">&lt;</div>
          <div class="arrow arrow-right">&gt;</div>
          <div class="watch-list"></div>
          <div class="dotnav">
            <ul></ul>
          </div>
        </div>
      </div>
      <!-- 轮播图4- ipad -->
      <div class="container">
        <h2>iPad精选配件</h2>
        <div class="main">
          <div class="arrow arrow-left">&lt;</div>
          <div class="arrow arrow-right">&gt;</div>
          <div class="watch-list"></div>
          <div class="dotnav">
            <ul></ul>
          </div>
        </div>
      </div>
      <!-- 轮播图5- MAC -->
      <div class="container">
        <h2>Mac精选配件</h2>
        <div class="main">
          <div class="arrow arrow-left">&lt;</div>
          <div class="arrow arrow-right">&gt;</div>
          <div class="watch-list"></div>
          <div class="dotnav">
            <ul></ul>
          </div>
        </div>
      </div>
      <!-- 轮播图6- Air -->
      <div class="container">
        <h2>Air精选配件</h2>
        <div class="main">
          <div class="arrow arrow-left">&lt;</div>
          <div class="arrow arrow-right">&gt;</div>
          <div class="watch-list"></div>
          <div class="dotnav">
            <ul></ul>
          </div>
        </div>
      </div>
      <!--底部栏 -->
      <div class="footer">
        <div class="foot-container1">
            <div class="part1">
                <img src="./images/foot1.png" alt="">
                <div class="part1-title">免费送货</div>
                <div class="part1-text">部分订单可付费选择三小时快送，或亲自到店取货。所有订单均可享免费送货。</div>
                <a href="">进一步了解 ></a>
            </div>
            <div class="part1">
                <img src="./images/foot2.png" alt="">
                <div class="part1-title">免费送货</div>
                <div class="part1-text">从你的账户页面在线完成退货。</div>
                <a href="">进一步了解 ></a>
            </div>
            <div class="part1">
                <img src="./images/foot3.png" alt="">
                <div class="part1-title">免费送货</div>
                <div class="part1-text">符合条件的用户可选择灵活的分期付款方式。</div>
                <a href="">进一步了解 ></a>
            </div>
        </div>
        <div class="foot-container2">
          <div class="tap">
            <ul>
              <li><a href="" class="title">选购及了解</a></li>
              <li><a href="">Mac</a></li>
              <li><a href="">iPad</a></li>
              <li><a href="">iPhone</a></li>
              <li><a href="">Watch</a></li>
              <li><a href="">Music</a></li>
              <li><a href="">iTunes</a></li>
              <li><a href="">HomePod</a></li>
              <li><a href="">iPod touch</a></li>
              <li><a href="">配件</a></li>
              <li><a href="">App Store 充值卡</a></li>
            </ul>
          </div>
          <div class="tap">
            <ul>
              <li><a href="" class="title">Apple Store 商店</a></li>
              <li><a href="">查找零售店</a></li>
              <li><a href="">Genius Bar 天才吧</a></li>
              <li><a href="">Today at Apple</a></li>
              <li><a href="">Today at Apple</a></li>
              <li><a href="">Apple 夏令营</a></li>
              <li><a href="">Field Trip 课外活动</a></li>
              <li><a href="">Apple Store App</a></li>
              <li><a href="">翻新和优惠</a></li>
              <li><a href="">分期付款</a></li>
              <li><a href="">Apple Trade In 换购计划</a></li>
              <li><a href="">订单状态</a></li>
              <li><a href="">选购帮助</a></li>
            </ul>
          </div>
          <div class="tap">
            <ul>
              <li><a href="" class="title">教育应用</a></li>
              <li><a href="">Apple 与教育</a></li>
              <li><a href="">高校师生选购</a></li>
              <li><a href="">商务应用</a></li>
              <li><a href="">Apple 与商务</a></li>
              <li><a href="">商务选购</a></li>
            </ul>
          </div>
          <div class="tap">
            <ul>
              <li><a href="" class="title">账户</a></li>
              <li><a href="">管理Apple ID</a></li>
              <li><a href="">Apple Store 账户</a></li>
              <li><a href="">iCloud.com</a></li>
              <li>&nbsp;</li>
              <li>&nbsp;</li>
              <li><a href="" class="title">Apple 价值观</a></li>
              <li><a href="">辅助功能</a></li>
              <li><a href="">环境责任</a></li>
              <li><a href="">隐私</a></li>
              <li><a href="">供应商责任</a></li>
            </ul>
          </div>
          <div class="tap">
            <ul>
              <li><a href="" class="title">关于 Apple</a></li>
              <li><a href="">Newsroom</a></li>
              <li><a href="">Apple 管理层</a></li>
              <li><a href="">工作机会</a></li>
              <li><a href="">创造就业</a></li>
              <li><a href="">活动</a></li>
              <li><a href="">联系 Apple</a></li>
            </ul>
          </div>
        </div>
        <div class="foot-container3">
            <div class="text2">Copyright © 2024 Apple Inc. 保留所有权利。</div>
        </div>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
